<template>
  <main class="page-nav">
    <nav class="page-header">
      <AppHeader />
    </nav>
    <div class="page-content">
      <router-view />
    </div>
    <footer class="page-footer">
      <AppFooter />
    </footer>
  </main>
</template>

<script>
import AppHeader from './header'
import AppFooter from './footer'
export default {
  name: "PageNav",
  components: {
    AppHeader,
    AppFooter,
  },
  data() {
    return {
      activeIndex: "1",
      menus: [
        {
          name: "Home",
          path: "/home",
        },
        {
          name: "Login",
          path: "/login",
        },
        {
          name: "Site",
          path: "/site",
        },
      ],
    }
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    },
  }
};
</script>

<style lang="scss">
@import './index.scss';

.header-menu{

}
</style>